<template>
  <div id="basicsList" v-cloak> 
   
    <div class="demo" :style="{  height: dtheight + 'px' }">
          <el-form ref="form"  label-width="0px">           
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">产品名称</div>
                      <el-form-item  style="margin-left:10px;">
                        <el-input v-model="form.pname" placeholder="请输入产品名称" style="width:300px;"></el-input>
                      </el-form-item>    
                </div>
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">产品描述</div>
                      <el-form-item  style="margin-left:10px;">
                        <el-input v-model="form.describe" placeholder="请输入产品描述" style="width:300px;"></el-input>
                      </el-form-item>    
                </div>
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">选择分类</div>
                       <el-form-item style="margin-left:10px;">
                          <el-select  v-model="form.select_num1" placeholder="选择方式一级分类"  style="width:300px;">
                              <el-option  v-for="(item,index) in select_data1" :key="index" :label="item.cname" :value="item.cid"></el-option>
                          </el-select>
                       </el-form-item> 
                </div>
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">选择推荐</div>
                       <el-form-item style="margin-left:10px;">
                          <el-select  v-model="form.select_num2" placeholder="选择推荐"  style="width:300px;">
                              <el-option  v-for="(item,index) in select_data2" :key="index" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                       </el-form-item> 
                </div>
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">产品价格</div>
                      <el-form-item  style="margin-left:10px;">
                        <el-input v-model="form.price" placeholder="请输入产品价格" style="width:300px;"></el-input>
                      </el-form-item>    
                </div>
                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">产品月销</div>
                      <el-form-item  style="margin-left:10px;">
                        <el-input v-model="form.sale_count" placeholder="请输入产品月销" style="width:300px;"></el-input>
                      </el-form-item>    
                </div>
               
               <div style="display:flex;align-items: center;">
                 <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">商品图片</div>
                <el-form-item style="margin-left:10px;">
                      <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload1"
                            :http-request="ImgUploadSectionFile">
                            <div class="avatar-uploader">
                                <img v-if="form.head_img"  :src="form.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                      </el-upload>
                </el-form-item>
               </div>

                <div style="display:flex;align-items: center;">
                      <div style="width:80px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:0px;">轮播图片</div>
                      <el-form-item style="margin-left:10px;">
                         <el-upload
                            class="upload-demo"
                            action="upaaa"
                            list-type="picture-card"
                             :file-list="form.fileList"
                            :http-request="ImgUploadSectionFile"
                            :before-upload="function (file) { return  beforeupload_s(file,'pic')}"
                            :before-remove='beforeremove'
                           >                            
                          <i class="el-icon-plus"></i>
                        </el-upload> 
                      </el-form-item> 
                </div>

                 
                
          </el-form>

          <div class="box_but">
             <div class="but_next" @click="up_but()">上一步</div>
             <div class="but_next" @click="go_but()" style="margin-left:10px;">下一步</div>
          </div>

    </div>

   </div>
</template>

<script>

export default {
   name: 'basicsList',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        form:{
          pname:'', //产品名称
          select_num1:'', //分类id
          select_num2:1, // 是否推荐
          price:'',  //价格
          sale_count:'', //商品月销
          describe:'', //产品描述
          fileList:[],
          phonearr:[], //轮播图数组id
          head_img:'', //商品封面图片
          upfile:'',  //商品封面url
        },
        select_data1:[],
        select_data2:[{"id":0,"name":"不推荐"},{"id":1,"name":"推荐"}],
        pid:'',
    }
  },
   components:{

  },
  created(){
      this.dtheight = window.innerHeight - 220
      this.pid = this.$route.query.pid
      this.fl_fun()

      this.form.pname = this.$store.state.product_data.pname
      this.form.select_num1 = this.$store.state.product_data.select_num1
      this.form.select_num2 = this.$store.state.product_data.select_num2
      this.form.price = this.$store.state.product_data.price
      this.form.sale_count = this.$store.state.product_data.sale_count
      this.form.describe = this.$store.state.product_data.describe
      this.form.upfile = this.$store.state.product_data.upfile
      this.form.head_img =  this.$store.state.product_data.head_img
      this.form.phonearr = this.$store.state.product_data.phonearr
      this.form.fileList = this.$store.state.product_data.fileList
     
  },
  mounted (){
      
  },
  methods: {
    fl_fun(){
          this.post("/product/listOfCate", {

	        }).then(res => {
             this.select_data1 = res.result
            console.log(res)
         })
      },
   up_but(){
        this.$router.go(-1)
   },
   go_but(){
        console.log(this.form)
        this.$store.commit('product_fun',this.form)  //向vuex提交 产品基础数据
        this.$router.push({
          path: '/index/shop/upwarehouse/standards',
          query: {
             pid:this.pid,
            // id:row.uid
          }
        })
     },
   ImgUploadSectionFile(param){//图片上传    
   },
   beforeupload1(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.form.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.form.upfile = res.result.url    
            })

            return false;

     },
   beforeupload_s(file,lx){   //重新写入上穿 需要点击确认上传与表单一起提交 //商品图片多图

        if(this.upimglx(file) == false){  //判断是否为fales
            this.upimglxtitle()   //执行弹出错误
            return false
        }   

         this.upimgpost("/image/uploadMultiple",file).then(res => {
     
            this.form.phonearr.push(res.result.id)
            this.form.fileList.push({"url": this.urlimg + res.result.url })
              console.log(this.form.phonearr)
           })

      },
       beforeremove(file,fileList){  //商品图片
          //console.log( file.uid)
           for (var i = 0; i < this.form.fileList.length; i++) {
            
                if(this.form.fileList[i].uid == file.uid){

                   this.form.phonearr.splice(i,1)
                   this.form.fileList.splice(i,1)
                }             
            }

           console.log(this.form.phonearr);
  

      // return false

      },

  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
    position: relative;
}
.box_but{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:10px;
}
.but_next{
   height: 35px;
   width:80px;
   border:1px solid #4F8EFF;
   display: flex;
   align-items: center;
   justify-content: center;
   color:#4F8EFF;
   font-size:14px;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

</style>